<template>
  <div class="absolute top-0 left-0 z-1000 w-full h-full bg-black/50 flex justify-center items-center">
    <div v-if="!showVideo" class="w-400px h-200px relative bg-#00313780 text-#fff p-20px box-border rounded-10px">
      <div class="text-20px text-center">监控信息</div>
      <div class="my-10px">监控名：{{ info?.deviceName }}</div>
      <div>监控经纬度信息：{{ info?.position }}</div>
      <div class="flex justify-center items-center mt-40px">
        <el-button type="primary" @click="showVideo = true">播放视频流</el-button>
        <el-button type="info" @click="emit('closeVideo')">关闭</el-button>
      </div>
    </div>
    <!-- 视频播放 -->
    <div v-if="showVideo" class="w-700px h-500px relative">
      <div class="absolute top-10px right-10px w-10px h-10px bg-black/30 z-1 text-#fff cursor-pointer"
        @click="showVideo=false">X</div>
      <iframe class="w-full h-full" :src="source" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义组件的 Props
interface MpegtsPlayerProps {
  source: string; // FLV 或 TS 视频流的 URL
  info: any;
}

defineProps<MpegtsPlayerProps>();

const emit = defineEmits(['closeVideo'])

const showVideo = ref(false);

</script>
